<template>
  <div class="playlist-view">
    <!-- 顶部操作区：搜索和筛选 -->
    <div class="top-actions">
      <el-input
          v-model="searchQuery"
          @keyup.enter.native="searchPlaylists"
          placeholder="搜索歌单..."
          prefix-icon="Search"
          class="search-input"
      />
      <el-select v-model="playlistType" placeholder="歌单类型" @change="filterPlaylists">
        <el-option label="全部" value="" />
        <el-option label="朋克" value="朋克" />
        <el-option label="粤语流行" value="粤语流行" />
        <el-option label="国风" value="国风" />
        <el-option label="电子" value="电子" />
        <el-option label="非洲节拍" value="非洲节拍" />
        <el-option label="嘻哈说唱" value="嘻哈说唱" />
        <el-option label="韩国流行" value="韩国流行" />
        <el-option label="古典" value="古典" />
        <el-option label="节奏布鲁斯" value="节奏布鲁斯" />
        <el-option label="华语流行" value="华语流行" />
        <el-option label="摇滚" value="摇滚" />
      </el-select>
    </div>

    <!-- 标签页：精选歌单和我的收藏 -->
    <el-tabs v-model="activeTab" style="margin-top: 20px;" @tab-change="handleTabChange">
      <!-- 精选歌单标签页 -->
      <el-tab-pane label="精选歌单" name="recommend">
        <div v-if="loading" class="loading">
          <el-skeleton :count="pageSize" class="skeleton-item" />
        </div>
        <div v-else-if="recommendPlaylists.length === 0" class="no-data">
          <el-empty description="暂无歌单数据" />
        </div>
        <div v-else class="playlist-grid">
          <el-card
              v-for="pl in recommendPlaylists"
              :key="pl.id"
              class="playlist-card"
              :body-style="{ padding: '10px' }"
              hover
          >
            <img
                :src="pl.coverUrl || 'https://picsum.photos/300/200?random=' + pl.id"
                class="playlist-cover"
                alt="歌单封面"
                @click.stop="getPlaylistDetail(pl.id)"
            />
            <div class="playlist-info">
              <div class="playlist-name" :title="pl.title">{{ pl.title }}</div>
              <div class="playlist-desc" :title="pl.style">风格：{{ pl.style  }}</div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>

      <!-- 我的收藏标签页 -->
      <el-tab-pane label="我的收藏" name="favorite">
        <div v-if="!isLogin()" class="need-login-tip">
          <el-alert title="请登录后查看我的收藏" type="info" show-icon />
          <el-button type="primary" @click="showLogin" style="margin-top: 15px;">去登录</el-button>
        </div>
        <div v-else-if="favoriteLoading" class="loading">
          <el-skeleton :count="pageSize" class="skeleton-item" />
        </div>
        <div v-else-if="favoritePlaylists.length === 0" class="no-data">
          <el-empty description="暂无收藏的歌单" />
        </div>
        <div v-else class="playlist-grid">
          <el-card
              v-for="pl in favoritePlaylists"
              :key="pl.id"
              class="playlist-card"
              :body-style="{ padding: '10px' }"
              @click="viewPlaylist(pl)"
              hover
          >
            <img
                :src="pl.coverUrl || 'https://picsum.photos/300/200?random=' + pl.id"
                class="playlist-cover"
                alt="收藏歌单封面"
                @click.stop="getPlaylistDetail(pl.id)"
            />
            <div class="playlist-info">
              <div class="playlist-name">{{ pl.title }}</div>
              <div class="playlist-desc">{{ pl.desc || pl.style }}</div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[12, 24, 36]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="activeTab === 'recommend' ? total : favoriteTotal"
        style="margin-top: 30px; text-align: right;"
    />

    <!-- 歌单详情弹窗 -->
    <el-dialog
        title="歌单详情"
        v-model="dialogVisible"
        width="80%"
        :before-close="handleClose"
        :fullscreen="isMobile"
    >
      <div v-if="detailLoading" class="detail-loading">
        <el-skeleton :rows="6" />
      </div>
      <div v-else>
        <!-- 歌单头部信息 -->
        <div class="detail-header">
          <img
              :src="playlistDetail.coverUrl || 'https://picsum.photos/300/300?random=' + playlistDetail.playlistId"
              class="detail-cover"
              alt="歌单封面"
          />
          <div class="detail-info">
            <h3>{{ playlistDetail.title }}</h3>
            <p>风格：{{ playlistDetail.style || '未知风格' }}</p>
            <p>简介：{{ playlistDetail.introduction || '暂无简介' }}</p>
            <div class="detail-actions">
              <!-- 未登录状态 -->
              <el-button
                  v-if="!isLogin()"
                  type="primary"
                  @click="showLogin"
              >
                登录后收藏
              </el-button>
              <!-- 已登录状态：严格根据后端返回的likeStatus判断 -->
              <el-button
                  v-else
                  type="primary"
                  :icon="playlistDetail.likeStatus === 1 ? 'HeartFilled' : 'Heart'"
                  @click="toggleLikeStatus"
                  :loading="toggleLikeLoading"
              >
                {{ playlistDetail.likeStatus === 1 ? '取消收藏' : '收藏' }}
              </el-button>
            </div>
          </div>
        </div>

        <!-- 歌曲列表 -->
        <div class="detail-songs">
          <h4>歌曲列表 ({{ playlistDetail.songs?.length || 0 }})</h4>
          <el-table :data="playlistDetail.songs || []" border style="width: 100%">
            <el-table-column label="序号" type="index" width="60" />
            <el-table-column label="封面">
              <template #default="scope">
                <img
                    :src="scope.row.coverUrl || 'https://picsum.photos/60/60?random=' + scope.row.songId"
                    class="song-cover"
                    alt="歌曲封面"
                />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="歌曲名称" />
            <el-table-column prop="artistName" label="歌手" />
            <el-table-column prop="album" label="专辑" />
            <el-table-column label="操作">
              <template #default="scope">
                <!-- 播放按钮 -->
                <el-button icon="Play" size="small" @click.stop="playSong(scope.row)" > <el-icon>
                  <VideoPlay/>
                </el-icon>
                  播放
                </el-button>

                <!-- 歌曲收藏：根据登录状态显示不同内容 -->
                <el-button
                    v-if="isLogin()"
                    size="small"
                    @click.stop="likeSong(scope.row)"
                    :type="scope.row.likeStatus === 1 ? 'danger' : 'default'"
                    :loading="scope.row.likeLoading"
                > <el-icon>
                  <Star/>
                </el-icon>
                  {{ scope.row.likeStatus === 1 ? '取消收藏' : '收藏' }}
                </el-button>

                <!-- 未登录状态：显示"收藏请先登录" -->
                <el-button
                    v-else
                    size="small"
                    @click.stop="showLogin"
                    class="login-prompt-btn"
                ><el-icon>
                  <Star/>
                </el-icon>
                  请先登录
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 评论区 -->
        <div class="detail-comments">
          <h4>评论列表 ({{ playlistDetail.comments?.length || 0 }})</h4>
          <div v-if="playlistDetail.comments?.length === 0" class="no-comment">
            暂无评论，快来发表第一条评论吧
          </div>
          <div v-else class="comments-list">
            <el-card
                v-for="comment in playlistDetail.comments"
                :key="comment.commentId"
                class="comment-card"
                :body-style="{ padding: '10px' }"
            >
              <div class="comment-item">
                <img
                    :src="comment.userAvatar || 'https://picsum.photos/40/40?random=' + comment.commentId"
                    class="comment-avatar"
                    alt="用户头像"
                />
                <div class="comment-info">
                  <div class="comment-header">
                    <div class="comment-username">{{ comment.username }}</div>
                    <div class="comment-time">{{ comment.createTime }}</div>
                  </div>
                  <div class="comment-content">{{ comment.content }}</div>
                  <div class="comment-actions">
                    <!-- 点赞评论 -->
                    <el-button
                        icon="Thumb"
                        size="small"
                        @click.stop="isLogin() ? toggleCommentLike(comment) : showLogin()"
                        :loading="comment.likeLoading"
                        :type="comment.isLiked ? 'primary' : 'default'"
                    >
                      {{ comment.likeCount || 0 }}
                    </el-button>

                    <!-- 删除评论：仅评论作者可见 -->
                    <el-button
                        v-if="currentUser.userId && comment.userId && String(currentUser.userId) === String(comment.userId)"
                        icon="Delete"
                        size="small"
                        type="danger"
                        @click.stop="deleteComment(comment)"
                        :loading="comment.deleteLoading"
                    >
                      删除
                    </el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </div>

          <!-- 发表评论区域 -->
          <div v-if="isLogin()" class="add-comment">
            <el-input
                v-model="commentContent"
                type="textarea"
                placeholder="请输入评论内容"
                :rows="3"
                style="margin-top: 10px;"
            />
            <el-button type="primary" @click="sendComment" :loading="sendCommentLoading" style="margin-top: 10px;">发表评论</el-button>
          </div>
          <div v-else class="need-login-comment">
            <el-alert title="请登录后发表评论" type="info" show-icon />
            <el-button type="text" @click="showLogin" style="margin-top: 10px;">去登录</el-button>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { isLogin, getToken } from '../utils/auth'
import http from "@/request/http.js";
import {
  ElSkeleton, ElEmpty, ElAlert, ElButton, ElMessage,
  ElDialog, ElTable, ElTableColumn, ElTabs, ElTabPane,
  ElSelect, ElOption, ElInput, ElPagination, ElCard
} from 'element-plus'
import {Star, VideoPlay} from "@element-plus/icons-vue";
import {usePlayer} from "@/utils/player.js";

// 路由实例
const router = useRouter()
const {playSong: playSongInPlayer} = usePlayer()
// 基础响应式状态
const isMobile = ref(window.innerWidth < 768)
const searchQuery = ref('')
const playlistType = ref('')
const activeTab = ref('recommend')
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(0)
const favoriteTotal = ref(0)
const loading = ref(false)
const favoriteLoading = ref(false)
const recommendPlaylists = ref([])
const favoritePlaylists = ref([])
// 登录相关状态
const currentUser = ref({})

// 操作加载状态（避免重复点击）
const toggleLikeLoading = ref(false) // 歌单收藏/取消加载
const sendCommentLoading = ref(false) // 发表评论加载

// 歌单详情相关状态（与后端字段对齐）
const dialogVisible = ref(false)
const detailLoading = ref(false)
const playlistDetail = ref({
  playlistId: '', // 后端返回的歌单ID
  title: '',
  coverUrl: '',
  introduction: '',
  style: '',
  songs: [], // 歌曲列表，每个song含likeStatus
  comments: [], // 评论列表
  likeStatus: 0 // 歌单收藏状态：0=未收藏，1=已收藏
})
const commentContent = ref('')

// 窗口大小变化处理
const handleResize = () => {
  isMobile.value = window.innerWidth < 768
}

// 登录状态变化处理
const handleLoginStatusChange = () => {
  initUserState()
  if (activeTab.value === 'favorite') {
    fetchFavoritePlaylists()
  }
  // 登录状态变化后，刷新当前歌单详情的收藏状态
  if (dialogVisible.value) {
    getPlaylistDetail(playlistDetail.value.playlistId)
  }
}

const initUserState = async () => {
  try {
    // 1. 先获取本地存储的Token（无Token则无需请求接口，直接设为空）
    const token = getToken();
    if (!token) {
      currentUser.value = {}; // 未登录：空对象
      console.log("初始化用户状态：未检测到Token，用户未登录");
      return;
    }

    // 2. 携带Token请求后端接口（后端通过Token识别当前用户）
    const response = await http.get('/user/getUserInfo', {
      headers: {
        // 后端需通过Authorization头获取Token，格式为 Bearer + 空格 + Token
        'Authorization': `Bearer ${token}`
      }
    });

    // 3. 处理后端返回结果（需根据后端实际返回结构调整，这里假设后端返回DataVo<UserVO>）
    // 假设后端返回格式：{ code: 0, data: UserVO, message: "success" }（DataVo结构）
    if (response.code === 0 && response.data) {
      // 赋值后端返回的UserVO（包含userId、username等字段）
      currentUser.value = response.data;
      console.log("初始化用户状态成功：", currentUser.value);
    } else {
      // 后端返回异常（如Token无效、用户不存在）
      currentUser.value = {};
      ElMessage.warning(`获取用户信息失败：${response.message || '未知错误'}`);
      console.warn("初始化用户状态：后端返回异常", response);
    }

  } catch (error) {
    // 捕获网络错误、请求超时等异常
    currentUser.value = {};
    ElMessage.error("获取用户信息异常，请检查网络或重新登录");
    console.error("初始化用户状态异常：", error);
  }
};
// 获取精选歌单
const fetchPlaylists = async () => {
  loading.value = true
  try {
    const res = await http.post('/playlist/getAllPlayLists', {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      title: searchQuery.value.trim(),
      style: playlistType.value
    })
    if (res.code === 0) {
      const {data} = res
      recommendPlaylists.value = data.items || []
      total.value = data.total || 0
    } else {
      ElMessage.error(`获取歌单失败：${res.message}`)
    }
  } catch (error) {
    console.error('请求歌单接口异常:', error)
    ElMessage.error('网络异常，获取歌单失败')
  } finally {
    loading.value = false
  }
}

// 获取收藏歌单
const fetchFavoritePlaylists = async () => {
  if (!isLogin()) return
  favoriteLoading.value = true
  try {
    const res = await http.post('/favorite/getFavoritePlaylists', {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      title: searchQuery.value.trim()
    })
    if (res.code === 0) {
      favoritePlaylists.value = res.data.items || []
      favoriteTotal.value = res.data.total || 0
    } else {
      ElMessage.error(`获取收藏歌单失败：${res.message}`)
    }
  } catch (error) {
    console.error('请求收藏歌单接口异常:', error)
    ElMessage.error('网络异常，获取收藏歌单失败')
  } finally {
    favoriteLoading.value = false
  }
}

// 获取歌单详情（参数为后端返回的playlistId）
const getPlaylistDetail = async (playlistId) => {
  if (!playlistId) return // 避免空ID请求
  detailLoading.value = true
  dialogVisible.value = true
  try {
    const res = await http.get(`/playlist/getPlaylistDetail/${playlistId}`)
    if (res.code === 0) {
      // 直接赋值后端返回的完整数据，确保likeStatus同步
      playlistDetail.value = {
        ...res.data,
        // 给歌曲/评论添加加载状态默认值（避免undefined）
        songs: res.data.songs?.map(song => ({ ...song, likeLoading: false })) || [],
        comments: res.data.comments?.map(comment => ({
          ...comment,
          likeLoading: false,
          deleteLoading: false,
          isLiked: comment.isLiked || false // 确保点赞状态有默认值
        })) || []
      }
      // 未登录时强制重置所有收藏状态为0
      if (!isLogin()) {
        playlistDetail.value.likeStatus = 0
        playlistDetail.value.songs = playlistDetail.value.songs.map(song => ({
          ...song,
          likeStatus: 0
        }))
        playlistDetail.value.comments = playlistDetail.value.comments.map(comment => ({
          ...comment,
          isLiked: false
        }))
      }
    } else {
      ElMessage.error(`获取歌单详情失败：${res.message}`)
    }
  } catch (error) {
    console.error('请求歌单详情接口异常:', error)
    ElMessage.error('网络异常，获取歌单详情失败')
  } finally {
    detailLoading.value = false
  }
}

// 歌单收藏/取消收藏（根据后端likeStatus切换）
const toggleLikeStatus = async () => {
  const { playlistId, likeStatus } = playlistDetail.value
  // 基础校验
  if (!isLogin()) {
    showLogin()
    return
  }
  if (!playlistId) {
    ElMessage.error('歌单ID异常，无法操作')
    return
  }

  toggleLikeLoading.value = true // 开启加载状态
  try {
    let res;
    if (likeStatus === 1) {
      // 取消收藏：请求后端取消接口
      res = await http.delete('/favorite/cancelCollectPlaylist', {
        params: { playlistId: playlistId }
      });
    } else {
      // 收藏：请求后端收藏接口
      res = await http.post('/favorite/collectPlaylist', null, {
        params: { playlistId: playlistId }
      });
    }

    // 结果处理：刷新详情页以同步最新likeStatus
    if (res.code === 0) {
      await getPlaylistDetail(playlistId);
      ElMessage.success(likeStatus === 1 ? '取消收藏成功' : '收藏成功');
      // 若当前在收藏标签页，同步刷新收藏列表
      if (activeTab.value === 'favorite') {
        fetchFavoritePlaylists();
      }
    } else {
      ElMessage.error(res.message || '操作失败');
    }
  } catch (error) {
    console.error('歌单收藏/取消异常:', error)
    ElMessage.error('网络异常，操作失败')
  } finally {
    toggleLikeLoading.value = false // 关闭加载状态
  }
};

// 歌曲收藏/取消收藏（根据song.likeStatus）
const likeSong = async (song) => {
  const { id, likeStatus } = song
  // 基础校验
  if (!isLogin()) {
    showLogin()
    return
  }
  if (!id) {
    ElMessage.error('歌曲ID异常，无法操作')
    return
  }

  song.likeLoading = true // 开启歌曲加载状态
  try {
    const res = likeStatus === 1
        ? await http.delete('/favorite/cancelCollectSong', {
          params: { songId: id }
        })
        : await http.post('/favorite/collectSong', null, {
          params: { songId: id }
        })

    // 结果处理：直接更新当前song的likeStatus
    if (res.code === 0) {
      song.likeStatus = likeStatus === 1 ? 0 : 1
      ElMessage.success(likeStatus === 1 ? '歌曲取消收藏成功' : '歌曲收藏成功')
    } else {
      ElMessage.error(res.message || '操作失败')
    }
  } catch (error) {
    console.error('歌曲收藏异常:', error)
    ElMessage.error('网络异常，操作失败')
  } finally {
    song.likeLoading = false // 关闭加载状态
  }
}

// 发表评论
const sendComment = async () => {
  const { playlistId } = playlistDetail.value
  // 基础校验
  if (!isLogin()) {
    showLogin()
    return
  }
  const content = commentContent.value.trim()
  if (!content) {
    ElMessage.warning('请输入评论内容')
    return
  }
  if (!playlistId) {
    ElMessage.error('歌单信息异常，无法发表评论')
    return
  }

  sendCommentLoading.value = true
  try {
    const res = await http.post('/comment/addPlaylistComment', {
      content: content,
      playlistId: playlistId,
      userId: currentUser.value.userId
    })
    if (res.code === 0) {
      ElMessage.success('评论发布成功！')
      await getPlaylistDetail(playlistId) // 刷新详情页显示新评论
      commentContent.value = '' // 清空输入框
    } else {
      ElMessage.error(`评论发布失败：${res.message}`)
    }
  } catch (error) {
    console.error('发表评论异常:', error)
    ElMessage.error('网络异常，发表评论失败')
  } finally {
    sendCommentLoading.value = false
  }
}

// 切换评论点赞状态（点赞/取消点赞）
const toggleCommentLike = async (comment) => {
  const { commentId, isLiked } = comment;
  if (!commentId) {
    ElMessage.error('评论ID异常，无法操作点赞');
    return;
  }

  comment.likeLoading = true; // 显示加载状态
  try {
    let res;
    if (isLiked) {
      // 取消点赞：调用 /comment/cancelLikeComment/{commentId}
      res = await http.patch(`/comment/cancelLikeComment/${commentId}`);
    } else {
      // 点赞：调用 /comment/likeComment/{commentId}
      res = await http.patch(`/comment/likeComment/${commentId}`);
    }

    if (res.code === 0) {
      // 同步更新前端显示的点赞数和状态
      comment.likeCount = isLiked
          ? (comment.likeCount || 0) - 1
          : (comment.likeCount || 0) + 1;
      comment.isLiked = !isLiked;
      ElMessage.success(isLiked ? '取消点赞成功' : '点赞成功');
    } else {
      ElMessage.error(res.message || '操作失败');
    }
  } catch (error) {
    console.error('评论点赞/取消异常:', error);
    ElMessage.error('网络异常，操作失败');
  } finally {
    comment.likeLoading = false; // 关闭加载状态
  }
};

// 删除评论
const deleteComment = async (comment) => {
  const { commentId, playlistId } = { ...comment, ...playlistDetail.value };
  if (!commentId || !playlistId) {
    ElMessage.error('评论/歌单ID异常，无法删除');
    return;
  }

  comment.deleteLoading = true; // 显示加载状态
  try {
    // 调用 /comment/deleteComment/{commentId}（无额外参数）
    const res = await http.delete(`/comment/deleteComment/${commentId}`);
    if (res.code === 0) {
      ElMessage.success('删除评论成功');
      await getPlaylistDetail(playlistId); // 刷新歌单详情，移除已删评论
    } else {
      ElMessage.error(res.message || '删除失败');
    }
  } catch (error) {
    console.error('删除评论异常:', error);
    ElMessage.error('网络异常，删除失败');
  } finally {
    comment.deleteLoading = false; // 关闭加载状态
  }
};

// 播放歌曲
const playSong = (song) => {
  console.log(song)
  if (song===null){
    return
  }
  window.dispatchEvent(new CustomEvent('playSong', { detail: song }))
  playSongInPlayer(song, playlistDetail.value.songs)
  ElMessage.success(`正在播放：${song.name} - ${song.artistName}`)
}

// 搜索歌单
const searchPlaylists = () => {
  currentPage.value = 1
  activeTab.value === 'recommend' ? fetchPlaylists() : fetchFavoritePlaylists()
}

// 筛选歌单
const filterPlaylists = () => {
  currentPage.value = 1
  fetchPlaylists()
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  activeTab.value === 'recommend' ? fetchPlaylists() : fetchFavoritePlaylists()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  activeTab.value === 'recommend' ? fetchPlaylists() : fetchFavoritePlaylists()
}

// 标签页切换
const handleTabChange = (tabName) => {
  activeTab.value = tabName
  if (tabName === 'favorite' && isLogin()) {
    fetchFavoritePlaylists()
  }
}

// 查看歌单详情页
const viewPlaylist = (pl) => {
  router.push(`/playlist/${pl.id || pl.playlistId}`) // 兼容两种ID字段
}

// 显示登录弹窗
const showLogin = () => {
  window.dispatchEvent(new CustomEvent('showLoginModal'))
}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
}

// 监听登录状态变化（token变化时刷新用户状态）
watch(() => getToken(), (newVal) => {
  initUserState()
  // 若弹窗打开，刷新歌单详情的收藏状态
  if (newVal && dialogVisible.value) {
    getPlaylistDetail(playlistDetail.value.playlistId)
  }
})

// 生命周期
onMounted(async () => {
  await fetchPlaylists(); // 获取歌单（可同步执行）
  await initUserState(); // 等待用户状态初始化完成
  window.addEventListener('resize', handleResize);
  window.addEventListener('loginStatusChange', handleLoginStatusChange);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  window.removeEventListener('loginStatusChange', handleLoginStatusChange)
})
</script>

<style scoped>
.playlist-view {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 60px);
}

/* 顶部操作区样式 */
.top-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

/* 加载状态样式 */
.loading {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.skeleton-item {
  width: calc((100% - 5 * 20px) / 6);
  height: 280px;
  border-radius: 8px;
}

/* 无数据提示 */
.no-data {
  text-align: center;
  padding: 50px 0;
}

/* 歌单网格布局 */
.playlist-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

/* 歌单卡片样式 */
.playlist-card {
  width: calc((100% - 5 * 20px) / 6);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.playlist-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.playlist-cover {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 10px;
  cursor: pointer;
}

.playlist-info {
  line-height: 1.4;
  padding: 0 5px;
}

.playlist-name {
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.playlist-desc {
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 登录提示样式 */
.need-login-tip {
  text-align: center;
  padding: 50px 0;
}

.need-login-comment {
  margin-top: 10px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

/* 详情弹窗样式 */
.detail-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.detail-cover {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin-right: 20px;
  border-radius: 8px;
}

.detail-info {
  flex: 1;
  min-width: 300px;
}

.detail-info h3 {
  margin-bottom: 15px;
  font-size: 24px;
}

.detail-info p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.detail-actions {
  margin-top: 20px;
}

/* 歌曲列表样式 */
.detail-songs, .detail-comments {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.detail-songs h4, .detail-comments h4 {
  margin-bottom: 15px;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.song-cover {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

/* 未登录状态下的歌曲收藏按钮样式 */
.login-prompt-btn {
  color: #606266;
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  display: inline-flex;
  align-items: center;
}

.login-prompt-btn:hover {
  background-color: #e9ecef;
  border-color: #dcdfe6;
}

.icon-heart {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23606266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* 评论区样式 */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
}

.comment-card {
  transition: box-shadow 0.3s ease;
}

.comment-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.comment-item {
  display: flex;
  align-items: flex-start;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}

.comment-info {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.comment-username {
  font-weight: bold;
  font-size: 14px;
}

.comment-time {
  font-size: 12px;
  color: #909399;
}

.comment-content {
  margin-bottom: 8px;
  line-height: 1.6;
}

.comment-actions {
  display: flex;
  gap: 10px;
}

.no-comment {
  text-align: center;
  padding: 40px 20px;
  color: #909399;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.add-comment {
  margin-top: 20px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .playlist-card {
    width: calc((100% - 4 * 20px) / 5);
  }
}

@media (max-width: 992px) {
  .playlist-card {
    width: calc((100% - 3 * 20px) / 4);
  }

  .detail-cover {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 768px) {
  .playlist-card {
    width: calc((100% - 2 * 20px) / 3);
  }

  .search-input {
    width: 100%;
  }

  .detail-header {
    flex-direction: column;
  }

  .detail-cover {
    margin-bottom: 15px;
    margin-right: 0;
    width: 100%;
    max-width: 300px;
  }

  /* 适配移动端表格按钮 */
  .login-prompt-btn {
    padding: 5px 8px;
    font-size: 12px;
  }
}

@media (max-width: 576px) {
  .playlist-card {
    width: calc((100% - 1 * 20px) / 2);
  }

  .skeleton-item {
    width: calc((100% - 1 * 20px) / 2);
  }

  .detail-info {
    min-width: auto;
  }

  .detail-info h3 {
    font-size: 20px;
  }

  /* 移动端优化按钮显示 */
  .login-prompt-btn {
    padding: 4px 6px;
    font-size: 11px;
  }
}
</style>
